<template>
  <div class="TransferTable">
    <c-transfer-table
      :table-column="tableColumn"
      :titles="['未选权限', '已选权限']"
      :left-data="leftData"
      :right-data="rightData"
      :left-filter="leftTableFilter"
      :right-filter="rightTableFilter"
      :disabled="disabled"
      @tableChange="handleTableChange"
    />
  </div>
</template>

<script>
export default {
  name: 'TransferTable',
  data() {
    return {
      clog: window.console.log,
      disabled: false,
      leftData: [
        {
          id: '1247433653357670401',
          name: '查看订单',
          description: '查看平台流转的订单数据',
          isCheck: 0,
        },
        {
          id: '1247429914517336066',
          name: '查看分单规则',
          description: '对分单规则的只读权限',
          isCheck: 0,
        },
        {
          id: '1252917997610242049',
          name: '查看商户电话权限',
          description: '查看商户电话权限',
          isCheck: 0,
        },
        {
          id: '1247434683084468226',
          name: '查看商户结余',
          description: '对商户结余账户的只读权限',
          isCheck: 0,
        },
        {
          id: '1247421142436704258',
          name: '查看商户申请开票记录',
          description: '对商户申请开票记录以及审核结果的只读权限',
          isCheck: 0,
        },
        {
          id: '1247429036720812033',
          name: '查看手续费',
          description: '对平台手续费费率的只读权限',
          isCheck: 0,
        },
        {
          id: '1247365354993250306',
          name: '财务明细查看权限',
          description: '对商户收支、手续费、结余明细的只读权限',
          isCheck: 0,
        },
        {
          id: '1248180784318148609',
          name: '分单规则管理',
          description: '对分单规则进行配置的权限',
          isCheck: 0,
        },
        {
          id: '1247421012681715713',
          name: '发票审核',
          description: '对发票申请的审核权限',
          isCheck: 0,
        },
        {
          id: '1248158198280515585',
          name: '发票审核记录查看',
          description: '商户申请开票记录的只读权限',
          isCheck: 0,
        },
        {
          id: '1247424625151864834',
          name: '规格商品查看',
          description: '对规格商品、商户信息的只读权限',
          isCheck: 0,
        },
        {
          id: '1247419960775438337',
          name: '结余结算',
          description: '对商户的结余资金进行手动结算、管理自动结算配置的权限',
          isCheck: 0,
        },
        {
          id: '1247420594723516418',
          name: '见证对账',
          description: '查看见证宝结算数据',
          isCheck: 0,
        },
        {
          id: '1247428469667688449',
          name: '库存查看',
          description: '查看平台内各个商户库存数据的权限',
          isCheck: 0,
        },
        {
          id: '1248167399883042818',
          name: '平台事件查看',
          description: '对已进行监控事件的只读权限',
          isCheck: 0,
        },
        {
          id: '1247432079126327297',
          name: '配置权重规则',
          description: '对权重规则进行管理配置的权限',
          isCheck: 0,
        },
        {
          id: '1247431668680126466',
          name: '权重规则查看',
          description: '对分单的权重规则的只读权限',
          isCheck: 0,
        },
        {
          id: '1245971603561410561',
          name: '商户查看',
          description: '商户信息只读权限',
          isCheck: 0,
        },
        {
          id: '1247356206582886401',
          name: '商户充值提现审核',
          description: '对商户的充值、提现进行审核的权限',
          isCheck: 0,
        },
        {
          id: '1247356443691085825',
          name: '商户充值提现审核记录查看',
          description: '对商户充值提现审核记录的只读权限',
          isCheck: 0,
        },
        {
          id: '1245970983857188866',
          name: '商户审核',
          description: '对新注册商户的审核工作',
          isCheck: 0,
        },
        {
          id: '1248180129960587266',
          name: '商户商品审核',
          description: '对商户发布的商品进行审核的权限',
          isCheck: 0,
        },
        {
          id: '1245971162677145601',
          name: '商户停用启用',
          description: '对异常商户进行停用以及启用操作',
          isCheck: 0,
        },
        {
          id: '1245980288517959682',
          name: '商户账户管理',
          description: '对商户的账户数据进行查看',
          isCheck: 0,
        },
        {
          id: '1248166480621629442',
          name: '事件触发消息配置查看',
          description: '事件触发消息配置的只读权限',
          isCheck: 0,
        },
        {
          id: '1245972521027661826',
          name: '商品基础数据管理',
          description: '对商品的类目、属性进行编辑管理权限',
          isCheck: 0,
        },
        {
          id: '1245968955529523201',
          name: '商品基础属性查看',
          description: '对商品的类目、属性只读权限',
          isCheck: 0,
        },
        {
          id: '1245968284487020545',
          name: '商品模板查看',
          description: '对商户模板的只读权限',
          isCheck: 0,
        },
        {
          id: '1248176973004435458',
          name: '商品模板管理',
          description: '对商品模板进行编辑管理的权限',
          isCheck: 0,
        },
        {
          id: '1245968639673266178',
          name: '商品审核',
          description: '对商户发布的商品进行审核权限',
          isCheck: 0,
        },
        {
          id: '1247425109166157825',
          name: '商品审核权限',
          description: '对商户发布的商品进行审核的权限',
          isCheck: 0,
        },
        {
          id: '1247424939439452162',
          name: '商品上下架操作',
          description: '对规格商品进行上下架的配置权限',
          isCheck: 0,
        },
        {
          id: '1247428761557692418',
          name: '设置手续费',
          description: '设置平台交易手续费费率的权限',
          isCheck: 0,
        },
        {
          id: '1280418369257897985',
          name: '统计分析权限',
          description: '统计分析权限',
          isCheck: 0,
        },
        {
          id: '1247424145235406850',
          name: '消息查看',
          description: '对已发送消息的只读权限',
          isCheck: 0,
        },
        {
          id: '1247423958668570625',
          name: '消息配置查看',
          description: '对于消息模板、规则、事件触发的配置项只读权限',
          isCheck: 0,
        },
        {
          id: '1242010198361534466',
          name: '员工入职离职管理',
          description: '绑定新员工并授权、停用离职员工',
          isCheck: 0,
        },
        {
          id: '1245978070880382977',
          name: '用户高级维护功能',
          description: '开启密码登录，控制用户启用停用',
          isCheck: 0,
        },
        {
          id: '1245978361168162818',
          name: '用户信息查看',
          description: '对用户信息进行查看的只读权限',
          isCheck: 0,
        },
      ],
      rightData: [
        {
          id: '1245978819270045697',
          name: '菜单按钮权限管理',
          description: '对菜单、按钮权限进行编辑管理',
        },
        {
          id: '1247421915862167554',
          name: '发送通知',
          description: '向平台内用户发送系统通知的权限',
        },
        {
          id: '1247423271851290625',
          name: '管理消息发送规则',
          description: '对消息模板、规则的配置进行配置的权限',
        },
        {
          id: '1248439769923350529',
          name: '权重项查看',
          description: '权重项内容查看',
        },
        {
          id: '1248445086543409154',
          name: '权重项配置',
          description: '针对权重项的配置权限',
        },
        {
          id: '1245979568779587586',
          name: '日志查看',
          description: '对日志内容的只读权限',
        },
        {
          id: '1245979895738167297',
          name: '日志管理配置',
          description: '日志级别的配置管理',
        },
        {
          id: '1247423545185693698',
          name: '事件触发消息配置',
          description: '对事件触发消息进行配置管理的权限',
        },
        {
          id: '1248167163081027586',
          name: '事件管理',
          description: '对事件操作进行配置的权限',
        },
        {
          id: '1248165409618685954',
          name: '用户角色权限菜单按钮配置查看',
          description: '用户角色权限菜单按钮的只读权限',
        },
        {
          id: '1245979108916097026',
          name: '用户角色权限管理',
          description: '对用户、用户组、角色、权限进行编辑管理',
        },
      ],
      tableColumn: [
        {
          title: '权限名称',
          dataIndex: 'title',
          scopedSlots: {
            filterDropdown: 'inputFilter',
            filterIcon: 'inputFilterIcon',
          },
        },
        {
          title: '权限描述',
          dataIndex: 'description',
          scopedSlots: {
            filterDropdown: 'inputFilter',
            filterIcon: 'inputFilterIcon',
          },
        },
      ],

      leftTableFilter: {},
      rightTableFilter: {},
    };
  },
  created() {},
  methods: {
    handleTableChange({ isLeft, pagination, filters, sorter }) {
      console.log({
        isLeft,
        pagination,
        filters,
        sorter,
      });
      this[isLeft ? 'leftTableFilter' : 'rightTableFilter'] = Object.keys(filters).reduce(
        (lastObj, key) => {
          lastObj[key] = filters[key][0];
          return lastObj;
        },
        {},
      );
    },
  },
};
</script>

<style lang="less" scoped>
.TransferTable {
}
</style>
